<bit-banner
  id="free-trial-banner"
  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
  bannerType="premium"
  icon="bwi-billing"
  [showClose]="false"
  *ngIf="freeTrialData?.shownBanner"
>
  {{ freeTrialData.message }}
  <a
    bitLink
    linkType="secondary"
    (click)="changePayment()"
    class="tw-cursor-pointer"
    rel="noreferrer noopener"
  >
    {{ "clickHereToAddPaymentMethod" | i18n }}
  </a>
</bit-banner>
<app-header></app-header>
<bit-container>
  <ng-container *ngIf="loading">
    <i
      class="bwi bwi-spinner bwi-spin tw-text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  </ng-container>
  <ng-container *ngIf="!loading">
    <!-- Account Credit -->
    <bit-section>
      <h2 bitTypography="h2">
        {{ accountCreditHeaderText }}
      </h2>
      <p class="tw-text-lg tw-font-bold">{{ Math.abs(accountCredit) | currency: "$" }}</p>
      <p bitTypography="body1">{{ "creditAppliedDesc" | i18n }}</p>
      <button type="button" bitButton buttonType="secondary" [bitAction]="addAccountCredit">
        {{ "addCredit" | i18n }}
      </button>
    </bit-section>
    <!-- Payment Method -->
    <bit-section>
      <h2 bitTypography="h2">{{ "paymentMethod" | i18n }}</h2>
      <p *ngIf="!paymentSource" bitTypography="body1">{{ "noPaymentMethod" | i18n }}</p>
      <ng-container *ngIf="paymentSource">
        <app-verify-bank-account
          *ngIf="paymentSource.needsVerification"
          [onSubmit]="verifyBankAccount"
          (submitted)="load()"
        >
        </app-verify-bank-account>
        <p>
          <i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
          {{ paymentSource.description }}
          <span *ngIf="paymentSource.needsVerification">- {{ "unverified" | i18n }}</span>
        </p>
      </ng-container>
      <button type="button" bitButton buttonType="secondary" [bitAction]="updatePaymentMethod">
        {{ updatePaymentSourceButtonText }}
      </button>
      <p *ngIf="subscriptionIsUnpaid" bitTypography="body1">
        {{ "paymentChargedWithUnpaidSubscription" | i18n }}
      </p>
    </bit-section>
  </ng-container>
</bit-container>
